<ix-page-header>
  <button
    *ixRequiresRoles="requiredRoles"
    ixTest="import-pool"
    mat-button
    [ixUiSearch]="searchableElements.elements.importPool"
    (click)="onImportPool()"
  >
    {{ 'Import Pool' | translate }}
  </button>

  <a mat-button ixTest="disks" [routerLink]="['/storage', 'disks']">
    {{ 'Disks' | translate }}
  </a>

  @if (!hasNoPools() && !arePoolsLoading()) {
    <a
      *ixRequiresRoles="requiredRoles"
      mat-button
      color="primary"
      ixTest="create-pool"
      [ixUiSearch]="searchableElements.elements.createPool"
      [routerLink]="['/storage', 'create']"
    >
      {{ 'Create Pool' | translate }}
    </a>
  }
</ix-page-header>

<div [ixUiSearch]="searchableElements.elements.storageDashboard">
  @if (arePoolsLoading()) {
    <ix-dashboard-pool
      class="pool"
      [isLoading]="true"
    ></ix-dashboard-pool>

    <ix-dashboard-pool
      class="pool"
      [isLoading]="true"
    ></ix-dashboard-pool>
  }

  @if (hasNoPools() && !arePoolsLoading()) {
    <div class="entity-empty-wrapper">
      <ix-empty
        [conf]="emptyConfig"
        [requiredRoles]="requiredRoles"
      ></ix-empty>
    </div>
  }

  @if (!hasNoPools() && !arePoolsLoading()) {
    @if (!hasNoPools()) {
      <ix-unused-resources
        [pools]="pools()"
      ></ix-unused-resources>
    }

    @for (pool of pools(); track pool; let i = $index) {
      <ix-dashboard-pool
        class="pool"
        [pool]="pool"
        [disks]="getDisksByPool(pool)"
        [isLoading]="isLoadingPoolDetails()"
        [rootDataset]="rootDatasets[pool.name]"
      ></ix-dashboard-pool>
    }
  }
</div>
